<template>
    <div>组合api的生命周期钩子</div>
    <p id="myp">{{ msg }}</p>
    <ul id="myul">
            <li v-for="(item, index) in arr" :key="index">
            {{ item }}
            </li>
        </ul>
        <button @click="arr.push(6)">向末尾添加</button>
</template>
<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue';

const msg= ref('hello');
const arr = ref([1, 2, 3,4,5]);
onMounted(() => { 
    console.log("onMounted开始执行。。。");
     console.log(document.getElementById("myp"))
    
})

onUpdated(() => { 
    console.log("onUpdated开始执行。。。");
     console.log(document.querySelectorAll('#myul li')[5]);
})

onUnmounted(() => { 
    console.log("onUnmounted开始执行。。。");
})

</script>